<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<div id="app">
    <!-- 筛选 -->
    <select v-model="filter_data" @change="shai">
        <option value="">请选择成绩的区间范围</option>
        <option value="优秀的">优秀的</option>
        <option value="良好的">良好的</option>
        <option value="及格的">及格的</option>
        <option value="不及格的">不及格的</option>
    </select><br>

    <!-- 查找 -->
    <input type="text" v-model="searchName" placeholder="请输入学生名字">
    <button @click="search_btn">查找</button><br>

    <!-- 排序 -->
    <button @click="sort('desc')">倒序</button>
    <button @click="sort('asc')">正序</button>

    <!-- 学生表格 -->
    <table border="1">
        <thead>
            <tr>
                <th>编号ID</th>
                <th>姓名</th>
                <th>成绩</th>
                <th>班级</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in shai_arr" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.score}}</td>
                <td>{{item.grade}}</td>
                <td>
                    <button @click="del(item.id)">删除</button>
                    <button @click="amend(item.id)">修改</button>
                </td>
            </tr>
        </tbody>
    </table>

    <!-- 修改框 -->
    <div v-show="gai" style="width: 200px; height: 300px; background-color: cornflowerblue;">
        学生名字: <input type="text" v-model="gaiStudent.name"><br>
        学生成绩: <input type="number" v-model.number="gaiStudent.score"><br>
        班级: <input type="text" v-model="gaiStudent.grade"><br>
        <button @click="Edits()">确认修改</button>
        <button @click="gai = false">取消</button>
    </div>

    <!-- 添加框 -->
    学生名字: <input type="text" v-model="newStudent.name"><br>
    学生成绩: <input type="number" v-model.number="newStudent.score"><br>
    班级: <input type="text" v-model="newStudent.grade"><br>
    <button @click="add()">添加</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            student_arr: [
                { id: 0, name: '张宇辉', score: 85, grade: '高三18班' },
                { id: 1, name: '焦海涛', score: 90, grade: '高三18班' },
                { id: 2, name: '徐宏', score: 59, grade: '高三18班' },
                { id: 3, name: '姚代举', score: 65, grade: '高三18班' },
                { id: 4, name: '张裕豪', score: 77, grade: '高三18班' },
                { id: 5, name: '马龙鑫', score: 100, grade: '高三18班' },
                { id: 6, name: '刘帅', score: 66, grade: '高三18班' },
            ],
            shai_arr: [],
            filter_data: '',
            searchName: '',
            newStudent: { name: '', score: 0, grade: '' },
            gaiStudent: { id: null, name: '', score: 0, grade: '' },
            gai: false
        },
        methods: {
            // 筛选
            shai() {
                let list = this.student_arr.filter(function (item) { return true; }); // 复制数组（替代...）
                if (this.filter_data === '优秀的') {
                    list = list.filter(function (item) { return item.score >= 90; });
                } else if (this.filter_data === '良好的') {
                    list = list.filter(function (item) { return item.score < 90 && item.score >= 80; });
                } else if (this.filter_data === '及格的') {
                    list = list.filter(function (item) { return item.score < 80 && item.score >= 60; });
                } else if (this.filter_data === '不及格的') {
                    list = list.filter(function (item) { return item.score < 60; });
                }
                this.shai_arr = list;
            },
            // 查找
            search_btn() {
                const keyword = this.searchName.trim();
                this.shai_arr = keyword
                    ? this.student_arr.filter(function (item) {
                        return item.name.indexOf(keyword) !== -1;
                    })
                    : this.student_arr;
            },
            // 添加
            add() {
                if (!this.newStudent.name || this.newStudent.score === undefined || !this.newStudent.grade) {
                    alert('请填写完整的学生信息');
                    return;
                }
                // 计算最大ID
                const ids = this.student_arr.map(function (item) { return item.id; });
                const maxId = ids.length ? Math.max.apply(null, ids) + 1 : 0;

                this.student_arr.push({
                    id: maxId,
                    name: this.newStudent.name,
                    score: this.newStudent.score,
                    grade: this.newStudent.grade
                });

                // 重置表单
                this.newStudent = { name: '', score: 0, grade: '' };
                this.shai();
            },
            // 删除
            del(id) {
                this.student_arr = this.student_arr.filter(function (item) {
                    return item.id !== id;
                });
                this.shai_arr = this.shai_arr.filter(function (item) {
                    return item.id !== id;
                });
            },
            // 打开修改框
            amend(id) {
                this.gai = !this.gai;
                const student = this.student_arr.find(function (item) {
                    return item.id === id;
                });
                if (student) {
                    // 复制对象（替代...扩展运算符）
                    this.gaiStudent.id = student.id;
                    this.gaiStudent.name = student.name;
                    this.gaiStudent.score = student.score;
                    this.gaiStudent.grade = student.grade;
                }
            },
            // 确认修改
            Edits() {
                const index = this.student_arr.findIndex(function (item) {
                    return item.id === this.gaiStudent.id;
                }.bind(this)); // 绑定this指向

                if (index !== -1) {
                    this.student_arr[index].name = this.gaiStudent.name;
                    this.student_arr[index].score = this.gaiStudent.score;
                    this.student_arr[index].grade = this.gaiStudent.grade;
                }
                this.gai = false;
                this.shai();
            },
            // 排序
            sort(type) {
                this.shai_arr.sort(function (a, b) {
                    return type === 'desc' ? a.score - b.score : b.score - a.score;
                });
            }
        },
        mounted() {
            this.shai();
        }
    })
</script>